<template>
  <div id="app">
    <audio ref="audioElement"
    >
      <source src="@/audio/danger.mp3" />
    </audio>
    <div style="width: 100%;height: 50px;margin-top: 15px">
      <el-form ref="form" label-width="100px" class="inline-form">
        <el-form-item label="时间查询" class="inline-form-item">
          <el-date-picker
            v-model="searchInput.queryObj.startTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions">
          </el-date-picker>
          <el-date-picker
            v-model="searchInput.queryObj.endTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions">
          </el-date-picker>
<!--          <el-date-picker type="dateTime" placeholder="选择开始日期" v-model="searchInput.queryObj.startTime" style="width: 200px;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--          <span class="line">-&#45;&#45;&#45;&#45;</span>-->
<!--          <el-date-picker type="dateTime" placeholder="选择结束日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="searchInput.queryObj.endTime" style="width: 200px;"></el-date-picker>-->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="resetCondition">重置条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item, index) in items.list" :key="index">
        <el-card class="box-card" :body-style="{padding: '15px'}">
          <div style="width: 100%;height: 190px">
            <div>
              <img :src="item.images" class="avatar" alt="图片" style="height: 180px;width: 120px;margin-top: 5px">
            </div>
            <div  style="margin-top: -15px;width: 350px;height: 190px">
              <p style="text-align: left">年龄：{{ item.minAge }}-{{ item.maxAge }}</p>
              <p style="text-align: left;">性别：{{ item.sex == 1 ? '男':'女' }}</p>
              <p style="text-align: left;">小区：{{ item.plotName }}</p>
              <p style="text-align: left;">时间：{{ item.dateTime | dateFormat }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchInput.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="searchInput.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="items.total">
    </el-pagination>
  </div>
</template>


<script>
import {getItems} from "@/api/system/face/face";

export default {
  name: 'App',
  data() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const time = `${year}0${month}`;
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      items: {
        // {
        //   "age" : 0,
        //   "beard" : 0,
        //   "datetime" : 0,
        //   "expression" : 2,
        //   "gender" : "2",
        //   "glasses" : 1,
        //   "h" : 96,
        //   "hat" : 1,
        //   "id" : 14,
        //   "image" : '',
        //   "ip" : "10.1.23.59",
        //   "mac" : "00:1F:AA:03:17:51",
        //   "mask" : 1,
        //   "race" : 1,
        //   "w" : 94,
        //   "x" : 42,
        //   "y" : 419
        // }
        // 其他人员的信息...
      },
      searchInput: {
        // indexName:"face_info_"+time,
        dataTypes:[],
        // indexName:'',
        pageVo: {
          pageSize: 8,
          currentPage: 1
        },
        queryObj: {
          // endTime: '',
          // startTime: ''
        }
      },
      filteredItems: [],
    };

  },

  watch: {
    // searchInput(newVal) {
    //   this.filteredItems = this.items.filter(item => {
    //     const regex = new RegExp(newVal, 'i');
    //     return Object.values(item).some(value => value.toString().match(regex));
    //   });
    // },
  },
  computed: {
    formattedDateTime() {
      const date = new Date(this.datetime * 1000); // Unix 时间戳通常以秒为单位，所以乘以 1000 转换为毫秒
      const options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
      return date.toLocaleString('zh-CN', options);
    },
  },
  methods: {
    // 计算属性用于转换日期字符串为时间戳
    timestamp(time) {
      const dateObj = new Date(time);
      return dateObj.getTime();
    },
    // 重置条件
    resetCondition() {
      this.searchInput.queryObj = {}
      this.getItems()
    },
    // 搜索按钮
    onSubmit() {
      this.getItems()
    },
    playAudio() {
      this.$refs.audioElement.play();
    },
    openSocket() {
      if (typeof WebSocket === 'undefined') {
        console.log('您的浏览器不支持WebSocket');
        return;
      }
      const socketUrl = 'ws://127.0.0.1:9607/websocket';
      this.socket = new WebSocket(socketUrl);
      this.socket.onopen = () => {
        console.log('websocket已打开');
        this.messages += 'websocket已打开\n';
      };
      this.socket.onmessage = (event) => {
        console.log(event.data);
        this.messages += `服务端回应: ${event.data}\n`;
        // alert(event.data)
        this.$refs.audioElement.play();
      };
      this.socket.onclose = () => {
        console.log('websocket已关闭');
        this.messages += 'websocket已关闭\n';
      };
      this.socket.onerror = () => {
        console.log('websocket发生了错误');
      };
    },
    sendMessage() {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(this.message);
        this.messages += `${this.message}\n`;
        this.message = '';
      } else {
        console.log('您的浏览器不支持WebSocket或WebSocket未连接');
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchInput.pageVo.pageSize = val
      this.getItems();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchInput.pageVo.currentPage = val
      this.getItems();
    },
    addCurrentYearMonthToDataTypes() {
      const currentDate = new Date();
      const year = currentDate.getFullYear().toString();
      const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并确保两位数
      const formattedDate = `face_info_${year}${month}`;
      // 检查是否已存在该字符串
      if (!this.searchInput.dataTypes.includes(formattedDate)) {
        this.searchInput.dataTypes.push(formattedDate); // 如果不存在，则添加
      }
    },
    getItems(){

      this.addCurrentYearMonthToDataTypes();
      getItems(this.searchInput).then(res=>{
        this.items = res
      })
    },
  },
  created() {
    this.getItems()
  },
  mounted() {
    this.openSocket();
  }
};
</script>
<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
}

.inline-form {
  display: flex;
  align-items: center;
}

.inline-form-item {
  display: flex;
  align-items: center;
}

.line {
  margin: 0 10px;
  color: #999;
}

.box-card {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  transition: all .3s;
  height: auto;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  float: left;
  border-bottom: 1px solid #ebeef5;
  padding-left: 10px;
}

.avatar {
  width: 100px;
  height: 55px;
  float: left;
  margin-right: 15px;
}

.name {
  font-size: 18px;
  float: left;
  color: #2f54eb;
}

.info {
  display: flex;
  flex-direction: column;
  float: left;
  margin-top: 10px;
}

.info-title {
  font-weight: bold;
  margin-right: 10px;
}

.info-value {
  white-space: nowrap;
}
</style>
